<template>
	<div class="role">
		<Layout>
			<Header class="header">
				<Row>
					<Col :span="24">
					<div>
						<span class="border-left"></span>
						banner管理
					</div>
					</Col>
				</Row>
			</Header>
			<Content class="content">
                <div class="card-add">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">banner管理</p>
                        </div>
                        <div class="ivu-card-body"> 
                            <div class="banner-setting">
                                <div class="index-banner upload-item">
                                    <div class="banner-img-box">
                                        <div class="banner-img" v-for="(item, index) in bannerImgArr" :key="index" @click="triigerFile(index)" :style="'background-image:url('+img_host+item+')'">
                                            <span @click.stop="deleteImg(index)">×</span>
                                        </div>
                                        <div v-if="bannerImgArr.length === 0">还没有图片哦，赶快上传吧</div>
                                    </div>
                                    <Button type="primary" id="doctorAuditing">上传banner图
                                        <input type="file" name="file" id="filebtn" multiple ref="triigerbtn" @change='addImgEvent' accept="image/png, image/jpeg, image/jpg">
                                    </Button>
                                    <span class="upload-text">按住ctrl可同时批量选择多张图片上传，最多可以上传5张图片，点击图片修改该图片</span>
                                </div>
                                <div class="btn-box">
                                    <Button type="primary" @click="submit">保存</Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
			</Content>
			<Footer>
				<p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
			</Footer>
		</Layout>
	</div>

</template>

<script>
	// import img from '../../assets/img/01.jpg'
	import * as api from '@/api/api'
	export default {
		data() {
			return {
                host: window.location.host,
                loading: this.$store.state,
				img_host: 'http://renli.oss-cn-shenzhen.aliyuncs.com/', //图片域名
				bannerImgArr: [],
				modifyImgIndex: '', //要修改的图序号
			}
		},
		mounted() {
			this.getList();
		},

		computed: {

		},

		watch: {

		},

		methods: {
			//删除图片
			deleteImg(index) {
				var that = this;
				that.bannerImgArr.splice(index, 1);
			},
			//选择图片
			addImgEvent(event) {
				var that = this;
				var picNum = that.bannerImgArr.length;
				var uploadNum = event.target.files.length;
				if (picNum + uploadNum > 5) {
					// Message({
					// 	showClose: true,
					// 	type: 'error',
					// 	message: '图片上传张数不能超过5张'
					// });
					this.$Notice.error({
						title: '错误',
						desc: '图片上传张数不能超过5张'
					});
					document.getElementById('filebtn').value = '';
					return false;
				};
				var imgs = event.target.files;
				var successNum = 0;
				for (var i = 0; i < imgs.length; i++) {
					var size = imgs[i].size / 1024;
					if (size > 500) {
						// Message({
						// 	showClose: true,
						// 	type: 'error',
						// 	message: '图片大小不能大于500KB'
						// });
						this.$Notice.error({
							title: '错误',
							desc: '图片大小不能大于500KB'
						});
						
						continue;
						return false;
					};
					var formdata = new FormData();
					formdata.append('file', imgs[i]);
					api.uploadImg(formdata).then(res => {
						if (res.data.code == 200) {

							if (that.modifyImgIndex != '') {
								that.bannerImgArr.splice(that.modifyImgIndex, 1, res.data.data);
							} else {
								that.bannerImgArr.push(res.data.data);
							}
							successNum++;
							if (successNum == uploadNum) {
								this.$Notice.success({
                                    title: '提示',
                                    desc: '恭喜你，上传成功！'
                                });
								that.modifyImgIndex = '';
							}
						}
					});
				}
			},
			//获取banner图
			getList() {
                var that = this;
                this.loading.isLoading = true;
				api.getDataList({
					"model": "Banners"
				}).then(res => {
                    this.loading.isLoading = false;
					if (res.data.code == 200) {
                        if(res.data.data.data[0].banners) {
                            that.bannerImgArr = res.data.data.data[0].banners.split(',');
                        }else {
                            that.bannerImgArr = [];
                        }
					}else {
                        this.$Notice.error({
                            title: '错误',
                            desc: res.data.msg
                        });
                    }
				})
			},
			//点击图片修改该图片
			triigerFile(index) {
				var that = this;
				that.modifyImgIndex = index;
				that.$refs.triigerbtn.click();
			},
			//提交banner图片
			submit() {
				var that = this;
				var banners = that.bannerImgArr.toString();
				api.createData({
					"model": "Banners",
					"data": {
						banners
					},
					"update_condition": {
						id: 1
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$Notice.success({
                            title: '提示',
                            desc: '恭喜你，保存成功！'
                        });
					}
				})
			}
		}
	}

</script>


<style lang="less">
	@import '../../assets/styles/constant.less';

	.role {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: #f5f7f9;

		.ivu-layout {
			min-height: 100%;
		}

		.header {
			font-size: 14px;
			line-height: 40px;
			height: 40px !important;
			color: #434343;
			padding: 0 50px;
			background-color: @background;
			border-bottom: 1px solid #ddd;

			.border-left {
				border-left: 5px solid @baseColor;
				margin-right: 4px;
			}
		}

		.content {
			width: 100%;
			min-height: 76%;
			padding: 20px 60px;

			#doctorAuditing {
				position: relative;
				input {
					opacity: 0;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
                    left: 0;
                    cursor: pointer;
				}
			}

			.banner-img-box {
				display: flex;
				margin-bottom: 30px;

				.banner-img {
					width: 130px;
					height: 130px;
					border: 1px dashed #cccccc;
					margin-right: 20px;
					background-size: contain;
					background-position: center center;
					background-repeat: no-repeat;
					position: relative;

					span {
						width: 20px;
						height: 20px;
						background: rgba(0, 0, 0, .5);
						color: #ffffff;
						line-height: 20px;
						text-align: center;
						font-size: 18px;
						position: absolute;
						top: -10px;
						right: -10px;
						border-radius: 50%;
						cursor: pointer;
						display: none;
					}
				}

				.banner-img:hover>span {
					display: block;
				}
			}

			.banner-setting {
				position: relative;
				width: 100%;
				background: #ffffff;
				border-top: none;
				padding: 20px;

				.upload-item {
					padding-top: 45px;
					padding-bottom: 100px;

					.upload-text {
						font-size: 12px;
						color: #999999;
						margin-left: 30px;
					}
				}

				.btn-box {
                    text-align: center;
                    // cursor: pointer;
				}
            }
            .ivu-card-head {
                background-color: #f2f2f2;
            }
		}

		.copy-right {
			text-align: center;
			color: #aaa;
			font-size: 12px;
		}
	}

</style>
